<template>
	<view class="userInfo">
		<view class="userInfo-box u-flex-between">
			<view class="userInfo-left u-flex">
				<uv-avatar v-if="hasValidSrc" :src="userInfo?.avatar" random-bg-color :size="50"></uv-avatar>
				<uv-avatar v-else :text="userInfo?.nickname" random-bg-color :size="50"></uv-avatar>
				<view class="info" v-if="isLogin && userInfo">
					<view class="name">{{userInfo?.nickname}}</view>
					<view class="grade">等级：{{userInfo.userGrade?.name}}</view>
					<view class="id u-flex u-col-end">
						<span class="id-text">ID：{{userInfo.id}}</span>
						<image src="/static/images/copy.svg" mode="aspectFill" class="copy" @click="copy(userInfo.id)">
						</image>
					</view>
				</view>
				<view class="info" @click="toLogin" v-else>
					<view class="name">未登录</view>
				</view>
			</view>
			<view class="userInfo-right u-flex">
				<uv-icon name="setting" :size="26" color="#0A0A0A" @click="toSetUp"></uv-icon>
				<uni-badge class="li-icon" :text="9" absolute="rightTop" is-dot size="small" :offset="[4,3]">
					<uni-icons type="chat" :size="28" class="icon"></uni-icons>
				</uni-badge>
			</view>
		</view>
		<view class="userInfo-footer u-flex-around">
			<view class="li u-flex-col u-col-center" @click="navigateTo('/subPackages/balance/index')">
				<view class="li-num">￥{{userInfo?.fund?.amount || 0}}</view>
				<view class="li-text">余 额</view>
			</view>
			<view class="li u-flex-col u-col-center" @click="navigateTo('/subPackages/user-integrate/index')">
				<view class="li-num">{{userInfo?.integral || 0}}</view>
				<view class="li-text">积 分</view>
			</view>
			<view class="li u-flex-col u-col-center" @click="navigateTo('/subPackages/user-coupon/index')">
				<view class="li-num">{{userInfo?.coupon_count || 0}}</view>
				<view class="li-text">优惠券</view>
			</view>
			<view class="li u-flex-col u-col-center" @click="navigateTo('/subPackages/user-collect/index')">
				<view class="li-num">{{userInfo?.collection_count || 0}}</view>
				<view class="li-text">我的收藏</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import useUserStore from '@/store/modules/user.js';
	import { navigateTo } from '@/utils/router.js'
	import { copy } from '@/utils/common.js'

	const userStore = useUserStore();
	const isLogin = computed(() => Boolean(userStore.token));
	const userInfo = computed(() => userStore.userInfo);
	const hasValidSrc = computed(() => Boolean(userInfo.value?.avatar));
	const toLogin = () => {
		navigateTo('/pages/login/index')
	}

	const toSetUp = () => {
		if (!isLogin.value) return;
		// 已登录
		navigateTo('/subPackages/set-up/index')
	}
</script>

<style lang="scss" scoped>
	.userInfo {
		padding: 24rpx 28rpx 40rpx 34rpx;
		background-color: $base-color-white;

		.userInfo-box {

			.userInfo-left {
				flex: 1;

				.info {
					line-height: 1;
					padding-left: 18rpx;

					.name {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: $font-size-32;
						color: $base-color;
						font-weight: bolder;
					}

					.grade {
						padding: 14rpx 0;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: $font-size-24;
						color: $base-light-color;
					}

					.id {

						.id-text {
							padding-right: 10rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: $font-size-24;
							color: $base-light-color;
						}

						.copy {
							width: 30rpx;
							height: 30rpx;
							display: inline-block;
						}
					}
				}
			}

			.userInfo-right {
				.icon {
					margin-left: 14rpx;
				}
			}
		}

		.userInfo-footer {
			padding-top: 60rpx;

			.li {
				line-height: 1;

				.li-num {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bolder;
					font-size: $font-size-28;
					color: $base-color;
				}

				.li-text {
					padding-top: 15rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: $font-size-24;
					color: $base-light-color;
				}
			}
		}
	}
</style>